<template>
	<div class="all">
		<div class="left">
			<left></left>
		</div>
		<div class="right">
			<div class="top">
				<top></top>
			</div>
			<div class="content">
				<!-- <div class="flex">
					<el-button type="warning" @click="log = true">新建代理商</el-button>
				</div> -->
				<div class="flexb" style="margin-bottom: 20px;">
					<div class="flex">
						<el-input v-model="search.transactionId" style="width: 200px; margin-right: 10px;" placeholder="流水号"></el-input>
						<el-input v-model="search.userPhone" style="width: 200px; margin-right: 10px;" placeholder="联系电话"></el-input>
						<el-button type="warning" @click="searchs">搜索</el-button>
					</div>
					
					
					<div class="flex">
						<el-button type="warning" @click="daochu">订单导出</el-button>
					</div>
				</div>
				<div class="flex" >
					<div class="navli navliact" @click="go('/caiwubaobiao')">财务流水记录</div>
					<div class="navli" @click="go('/caiwubaobiao/caiwubaobiao2')">扣费订单</div>
				</div>
				
				 
				
				<div class="table">
					<el-table :data="tableData" border style="width: 100%">
						
						<el-table-column label="订单号">
							<template slot-scope="scope">
								<span style="margin-left: 10px">{{ scope.row.orderId }}</span>
							</template>
						</el-table-column>
						<el-table-column label="用户昵称">
							<template slot-scope="scope">
								<span style="margin-left: 10px">{{ scope.row.userName }}</span>
							</template>
						</el-table-column>
						<el-table-column label="联系电话">
							<template slot-scope="scope">
								<span style="margin-left: 10px">{{ scope.row.userPhone }}</span>
							</template>
						</el-table-column>
						<el-table-column label="充值金额">
							<template slot-scope="scope">
								<span style="margin-left: 10px">{{ scope.row.price }}</span>
							</template>
						</el-table-column>
						<el-table-column label="充值方式">
							<template slot-scope="scope">
								<span style="margin-left: 10px" v-if="scope.row.payWay == 1">微信支付</span>
								<span style="margin-left: 10px" v-if="scope.row.payWay == 2">活动赠款</span>
								<span style="margin-left: 10px" v-if="scope.row.payWay == 3">订单退款</span>
							</template>
						</el-table-column>
						<el-table-column label="充值时间">
							<template slot-scope="scope">
								<span style="margin-left: 10px">{{ scope.row.createTime }}</span>
							</template>
						</el-table-column>
						<el-table-column label="流水号">
							<template slot-scope="scope">
								<span style="margin-left: 10px">{{ scope.row.transactionId }}</span>
							</template>
						</el-table-column>
						<el-table-column label="操作退款金额">
							<template slot-scope="scope">
								<span style="margin-left: 10px">{{ scope.row.backPrice }}</span>
							</template>
						</el-table-column>
						<el-table-column label="操作退款时间">
							<template slot-scope="scope">
								<span style="margin-left: 10px">{{ scope.row.updateTime }}</span>
							</template>
						</el-table-column>
						<el-table-column label="操作">
							<template slot-scope="scope">
								<el-button type="text" v-if="!scope.row.backPrice > 0" @click="tuikuan(scope.row)">退款</el-button>
							</template>
						</el-table-column>
					</el-table>
					<el-pagination style="text-align: right; padding: 20px;" background layout="total,prev, pager, next" :current-page="pageNo"
					 @current-change="fanye" :page-size="search.pageSize" :total="total"></el-pagination>
				</div>
			</div>
		</div>
		<el-dialog title="退款信息确认" :visible.sync="log" :close-on-click-modal="false" width="600px">
			<div class="flex">
				<div class="f1">退款原因:</div>
				<div class="f2">
					<el-input v-model="all.backReason" style="width: 400px;" placeholder="退款原因"></el-input>
				</div>
			</div>
			<div class="flex">
				<div class="f1">退款金额:</div>
				<div class="f2">
					<el-input v-model="all.price" style="width: 400px;" placeholder="退款金额"></el-input>
				</div>
			</div>
			
			<span slot="footer" class="dialog-footer">
				<el-button @click="log = false">取 消</el-button>
				<el-button type="primary" @click="tuiba">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	// import axios from 'axios'
	import top from '@/components/top.vue'
	import left from '@/components/left.vue'
	import bus from '@/assets/bus.js'
	export default {
		name: 'index',
		components: {
			left,
			top
		},
		data() {
			return {
				search:{
					transactionId:"",
					userPhone:"",
					pageNo: 1,
					pageSize: 20,
				},
				total: 0,
				loading: false,
				tableData: [],
				all:{
					transactionId:"",
					price:"",
					backReason:""
				},
				log:false
			}
		},
		watch: {
			// num:function(newValue, oldValue) {
			//   console.log(newValue, oldValue)
			// }
		},
		computed: {
			// zongjia:function(){
			//   return this.num * 100
			// }
		},
		created() {
			this.getlist()
		},
		mounted() {

		},
		methods: {
			daochu:function(){
				// /work/orderPay/exportXls  
				const a = document.createElement('a');
				a.setAttribute('download', '');
				a.setAttribute('href', this.url + `work/orderPay/exportXls`);
				a.click();
			},
			tuiba:function(){
					if(this.all.price < 0){
						this.$message.error('金额不能小于0');
						return false
					}
					if(this.all.price > this.all.qian){
						this.$message.error('金额不能大于该笔充值额度');
						return false 
					}
				this.axios.post(this.url + `/work/orderPay/backMoney?price=${this.all.price}&transactionId=${this.all.transactionId}&backReason=${this.all.backReason}`)
					.then(response => {
						if (response.data.success == true) {
							this.$message.success('操作成功');
							this.getlist()
							this.log=false
						} else {
							if (response.data.code == 401) {
								this.$router.push({
									path: '/login'
								})
							} else {
								this.$message.error(response.data.message);
							}
						}
					})
			},
			tuikuan:function(item){
				this.log = true
				this.all.transactionId = item.transactionId
				this.all.backReason = ''
				this.all.price = ''
				this.all.qian = item.price
				// this.$prompt('请输入退款金额', '提示', {
				//   confirmButtonText: '确定',
				//   cancelButtonText: '取消'
				// }).then(({ value }) => {
				// 	if(value < 0){
				// 		this.$message.error('金额不能小于0');
				// 		return false
				// 	}
				// 	if(value > item.price){
				// 		this.$message.error('金额不能大于该笔充值额度');
				// 		return false
				// 	}
					
				//   this.axios.post(this.url + `/work/orderPay/backMoney?price=${value}&transactionId=${item.transactionId}`)
				//   	.then(response => {
				//   		if (response.data.success == true) {
				//   			this.$message.success('操作成功');
				//   			this.getlist()
				//   		} else {
				//   			if (response.data.code == 401) {
				//   				this.$router.push({
				//   					path: '/login'
				//   				})
				//   			} else {
				//   				this.$message.error(response.data.message);
				//   			}
				//   		}
				//   	})
				// })
				
			},
			
			go: function(url) {
				this.$router.push({
					path: url
				})
			},
			searchs:function(){
				this.search.pageNo = 1
				this.getlist()
			},
			//翻页
			fanye: function(page) {
				this.loading = true
				this.search.pageNo = page
				this.getlist()
			},
			//获取列表
			getlist: function() {
				this.axios.get(this.url + `/work/orderPay/list`,{params:this.search})
					.then(response => {
						if (response.data.success == true) {
							this.tableData = response.data.result.records
							this.total = response.data.result.total
						} else {
							if (response.data.code == 401) {
								this.$router.push({
									path: '/login'
								})
							} else {
								this.$message.error(response.data.message);
							}
						}
					})
			}		
		}	

	}
</script>

<style scoped lang="less">
	.all {
		display: flex;
		height: 100vh;

		.left {
			width: 200px;
			height: 100%;
			background: #414652;
			box-shadow: 0 2px 10px #2D3038;
		}

		.right {
			width: calc(100% - 180px);
			height: 100%;
			overflow: auto;

			.content {
				padding: 20px;
				.navli{ padding:15px 30px; border-top: 2px #eaeaea solid; font-size: 16px; cursor: pointer;}
				.navliact{ background: #fff; border-top: 2px #f00 solid;}
				.table { box-shadow: 0;
					
				}
			}
			.el-table{box-shadow: 0 0 0 0 #fff !important; border: 0;}
		}
	}
</style>
